{% extends "pages/page.html" %}

{% load mezzanine_tags i18n staticfiles event comment_tags%}

{% block extra_js %}

    <link rel="stylesheet" type="text/css" href="{% static "ai60/components/image_gallary/css/style.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "ai60/components/image_gallary/css/elastislide.css" %}"/>
    <script type="text/javascript"
            src="{% static "ai60/components/image_gallary/javascript/jquery.tmpl.js" %}"></script>
    <script type="text/javascript"
            src="{% static "ai60/components/image_gallary/javascript/jquery.easing.1.3.js" %}"></script>
    <script type="text/javascript"
            src="{% static "ai60/components/image_gallary/javascript/jquery.elastislide.js" %}"></script>
    <script type="text/javascript" src="{% static "ai60/components/image_gallary/javascript/gallery.js" %}"></script>

    <noscript>
        <style>
            .es-carousel ul {
                display: block;
            }
        </style>
    </noscript>
    {% verbatim %}
    <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
			<div class="rg-image-wrapper">
				{%if itemsCount > 1%}
					<div class="rg-image-nav">
						<a href="#" class="rg-image-nav-prev">Previous Image</a>
						<a href="#" class="rg-image-nav-next">Next Image</a>
					</div>
				{%/if%}
				<div class="rg-image"></div>
				<div class="rg-loading"></div>
				<div class="rg-caption-wrapper">
					<div class="rg-caption" style="display:none;">
						<p></p>
					</div>
				</div>
			</div>

    </script>
    {% endverbatim %}
{% endblock %}

{% block main %}

    <div class="doc-box" id="chapterHeader">
        {% include "organizations/includes/organization_header.html" with organization=page.parent.parent.organization %}
    </div>
    <div id="C_context">
        <div class="clearfix" id="C_document">
            <div id="D_photoBox" class="doc-box photoBox">
                <div class="doc-content">

                    <p><a href="{{ page.parent.event.get_absolute_url }}gallery_list"><i class="icon icon-s icon-back"></i>
                        返回照片列表</a></p>

                    <h1>活动相册</h1>

                    <div id="rg-gallery" class="rg-gallery">
                        <div class="rg-thumbs">
                            <!-- Elastislide Carousel Thumbnail Viewer -->
                            <div class="es-carousel-wrapper">
                                <div class="es-nav">
                                    <span class="es-nav-prev">Previous</span>
                                    <span class="es-nav-next">Next</span>
                                </div>
                                <div class="es-carousel">
                                    <ul>
                                        {% for image in page.gallery.images.all %}
                                            <li>
                                                <a href="#">
                                                    <img src="{{ MEDIA_URL }}{% thumbnail image.file 65 65 %}"
                                                         data-large="{{ MEDIA_URL }}{% thumbnail image.file 640 480 %}"
                                                         alt="{{ image.name }}"
                                                         data-description="{{ image.name }}"/>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <!-- End Elastislide Carousel Thumbnail Viewer -->
                        </div>
                        <!-- rg-thumbs -->
                    </div>
                    <!-- rg-gallery -->


                    <div id="photo-content">
                        <div id="D_photoGallery_commentsWrapper">

                            <h3>活动评论</h3>

                            <div id="D_photoGallery_commentsFormWrapper">

                                <h3>您好{% if request.user.is_authenticated %}
                                    ，{{ request.user.account.get_name }}
                                {% endif %}, 发表一下您对本相册的看法：</h3>

                                {% comments_for page.gallery %}
                            </div>
                        </div>


                    </div>
                    <!-- #photo-content -->
                </div>
                <!-- .doc-content -->
            </div>
        </div>

        <div id="C_nav">
            {% include "organizations/includes/organization_intro.html" with organization=page.parent.parent.organization %}
        </div>
    </div>
    <!-- C_context -->
{% endblock %}
